<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/static/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>支线管理公司</title>
<base href="<%=basePath%>">

<link rel="stylesheet" href="static/ace/css/ace.css"
	class="ace-main-stylesheet" id="main-ace-style" />
<script type="text/javascript"
	src="../plugins/websocketInstantMsg/ext4/ext-all-debug.js"></script>
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<script type="text/javascript"
	src="../plugins/websocketInstantMsg/ext4/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
	href="../plugins/websocketInstantMsg/ext4/resources/css/ext-all.css" />
</head>
<body>
	<div id="div1" style="height: 50px"></div>
	<div id="aa"></div>
	
</body>
<script type="text/javascript">

Ext.onReady(function () {
    var store = Ext.create('Ext.data.Store', {
        fields: [ "ID","BOOKING_TYPE", "COMPANY_NAME", "SPELL_CODE"],
        pageSize: 20,  //页容量5条数据
        //是否在服务端排序 （true的话，在客户端就不能排序）
        remoteSort: false,
        remoteFilter: true,
        proxy: {
            type: 'ajax',
            url: '../branch/list',
            reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
                type: 'json', //返回数据类型为json格式
                root: 'rows',  //数据
                totalProperty: 'total' //数据总条数
            }
        },
        sorters: [{
			property: 'ordeId',
			direction: 'desc'
		}],
        autoLoad: true  //即时加载数据
    });
//新建的列表
    var grid = Ext.create('Ext.grid.Panel', {
    renderTo: "aa",
    id:'grid',
    store: store,
    height: 600,
    width:"100%",
    
    selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE"}),
    //selModel: { selType: 'checkboxmodel' },   //选择框
    columns: [                    
                  { text: 'ID', dataIndex: 'ID',  maxWidth: 120 ,hidden:true},
                  { text: '类型', dataIndex: 'BOOKING_TYPE',  maxWidth: 120 },
                  { text: '公司名称', dataIndex: 'COMPANY_NAME', align: 'left', minWidth: 80 },
                  { text: '检索码', dataIndex: 'SPELL_CODE', maxWidth: 80, align: 'left' }, 
                 
               ],
    bbar: [{
        xtype: 'pagingtoolbar',
        store: store,
        displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
        emptyMsg: "没有数据",
        beforePageText: "当前页",
        afterPageText: "共{0}页",
        displayInfo: true                 
    }],
   
     tbar:[
     {text:'新增',iconCls:'a_add',handler:showAlert},"-",
     {text:'编辑',iconCls:'a_edit2',handler:showAler},
     {text:'删除',iconCls:'a_edit2',handler:showAle}], 
     
});
 //新增   
function showAlert (){
win.show();
}
//修改
function showAler (){
	 var records = grid.getSelectionModel().getSelection();
   	 if(records.length==0){
     			Ext.Msg.alert("提示","请选择需要编辑的记录");return;
     		}
     		if(records.length>1){
     			Ext.Msg.alert("提示","只能编辑一条记录");return;
     		}
     		var ID = records[0].data.ID;
            Ext.getCmp("ID").setValue(ID);
     		
			var BOOKING_TYPE = records[0].data.BOOKING_TYPE;
     		Ext.getCmp("BOOKING_TYPE").setValue(BOOKING_TYPE);
     		var COMPANY_NAME = records[0].data.COMPANY_NAME;
     		Ext.getCmp("COMPANY_NAME").setValue(COMPANY_NAME);
     		var SPELL_CODE = records[0].data.SPELL_CODE;
     		Ext.getCmp("SPELL_CODE").setValue(SPELL_CODE);
	       win.show();
	}
	//删除
	function  showAle(){
		var records = grid.getSelectionModel().getSelection();
 		if(records.length==0){
 				Ext.Msg.alert("提示","请选中需要删除的记录");return;
 			}
 			var arr = [];
 			Ext.each(records,function(item){
 				obj = {
 						id:item.data.ID
 						
 				};
 				arr.push(obj);
 				
 			});
 			var array = JSON.stringify(arr);
 			Ext.Ajax.request({
 						url: '../branch/dele',
						params:{
							
							array:array
								
						},
						timeout:5000,
						success:function(response){
							 Ext.MessageBox.alert("删除","删除成功");
								var store = Ext.getCmp('grid').getStore();
							 store.reload();
						},
						
					});
 	}


	
	//保存按钮
	var save = new Ext.Button({
     	text: '保存',
     	 handler: function(){
     		var ID = Ext.getCmp('ID').getValue();
     		var BOOKING_TYPE = Ext.getCmp('BOOKING_TYPE').getValue();
			var COMPANY_NAME = Ext.getCmp('COMPANY_NAME').getValue();
			var SPELL_CODE = Ext.getCmp('SPELL_CODE').getValue();
			var store = Ext.getCmp('grid').getStore();
	  		 Ext.Ajax.request({
     			 url: '../branch/save',
					params : {
						ID : ID,
						BOOKING_TYPE : BOOKING_TYPE,
						COMPANY_NAME : COMPANY_NAME,
						SPELL_CODE : SPELL_CODE
					},
					method : 'POST',
					success : function() {
						Ext.MessageBox.alert("保存成功", "保存成功");
                         
						win.close();
						store.load();
					},
				});

			}

		});
	//重置按钮
		var reset = new Ext.Button({
			text : '重置',
			listeners : {
				'click' : function() {
					Ext.getCmp('add').form.reset();
				
				}
			}
		}

		);
	//取消按钮
		var cancel = new Ext.Button({
			text : '取消',
			listeners : {
				'click' : function() {
					win.close();
				}
			}
		}

		);
	//新增一个form表单
		var add = Ext.create("Ext.form.Panel", {
             id:'add',
			frame : true,
			width : 450,
			height : 400,

			defaults : {
				anchor : '100%',
				labelWidth : 50,
				labelAlign : "right"
			},
			items : [ {
				id : 'ID',
				hidden : true,
				hideLabel : true,
				xtype : 'textfield',
				fieldLabel : 'ID',
				name : 'ID'
			}, {
				
				id:'BOOKING_TYPE',				
				fieldLabel : '类型',
				name : 'BOOKING_TYPE',
				xtype : 'textfield',
			}, {
				id : 'COMPANY_NAME',
				fieldLabel : '公司名称',
				name : 'COMPANY_NAME',
					xtype : 'textfield',
			}, {
				id : 'SPELL_CODE',

				fieldLabel : '检索码',
				name : 'SPELL_CODE',
				xtype : 'textfield',
			},

			],

		});
        //新建一个窗口，把form表单放进去
		var win = Ext.create("Ext.window.Window", {
			title : '新增',
			width : 460,
			height : 300,
			resizable : true,
			modal : true,
			closable : true,
			maximizable : true,
			minimizable : true,
			closeAction :'hide',
			buttons : [ save, reset, cancel ],
			items : [ add ],
		});
           
        //新建查询列表
		var c1 = Ext.create('Ext.container.Container', {
			layout : 'column',
			defaults : {
				labelAlign : 'left',
				labelWidth : 60
			},
			items : [
					{
						xtype : 'textfield',
						name : 'BOOKING_TYPE',
						id : 'a',
						columnWidth : 1 / 5,
						padding : '5px',
						fieldLabel : '类型'
					},
					{
						xtype : 'textfield',
						name : 'COMPANY_NAME',
						id : 'b',
						columnWidth : 1 / 5,
						padding : '5px',
						fieldLabel : '公司名称'
					},
					{
						xtype : 'textfield',
						name : 'SPELL_CODE',
						id : 'c',
						columnWidth : 1 / 5,
						padding : '5px',
						fieldLabel : '检索码'
					},
					{
						xtype : "button",
						padding : '5px',
						text : '查询',
						handler : function() {
							var BOOKING_TYPE = Ext.getCmp('a')
									.getValue();
							var COMPANY_NAME = Ext.getCmp('b')
									.getValue();
							var SPELL_CODE = Ext.getCmp('c')
									.getValue();
							var store = Ext.getCmp('grid').getStore();
							store.on('beforeload', function(store, options) {
								var new_params = {
									BOOKING_TYPE : encodeURI(BOOKING_TYPE),
									COMPANY_NAME : encodeURI(COMPANY_NAME),
									SPELL_CODE : encodeURI(SPELL_CODE)
								};
								Ext.apply(store.proxy.extraParams, new_params);
							});
							store.load();
						}
					}, ]
		});
           //把查询的列表放进form中
		var form = Ext.create('Ext.form.Panel', {
			renderTo : 'div1',
			frame : true,
			items : [ c1 ],
		//  buttons: [{
		//          text: '查询',
		//          handler: function() {
		//              var form=this.up('form');
		//              var id=form.down('textfield[name=id]').value;
		//              var uname=form.down('textfield[name=useName]').value;
		//              if(!id){
		//              alert('编号不能为空！');
		//              return;
		//              }
		//              if(!uname){
		//              alert('名称不能为空！');
		//              return;
		//              }
		//             Ext.MessageBox.alert('提示框','提交成功，正在保存数据，请稍后！');
		//          }
		//    }]
		});

	});
</script>
</html>